<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>demo</title>
<style>
*{padding:0; margin:0}
body{font-size:12px; font-family:"微软雅黑","宋体"; color:#333;}
h1{font-size:16px; background:#ccc; padding:5px 10px; margin-bottom:15px}
.effect{ margin-bottom:15px; padding:0 10px}
.hide{display:none}
button{width:50px;}
/* Clear Fix */ 
.clearfix:after { content:"."; display:block; height:0; clear:both; visibility:hidden; }
.clearfix { display:inline-block; }
/* Hide from IE Mac \*/ 
.clearfix { display:block; }
/* End hide from IE Mac */ 
/*focus*/
#focus,#focus1{ width:564px; height:293px; padding:5px; border:1px solid #ccc;}
#focus1{position:relative; overflow:hidden; padding:0}
#focus img{position:absolute}
#focus1 img{ float:left; position:absolute}
#ctr,#ctr1{ margin-top:10px;}
#ctr span,#ctr1 span{ display:inline-block; width:18px; height:18px; line-height:18px; border:1px solid #ccc; text-align:center; cursor:pointer}
#ctr span.hover,#ctr1 span.hover{background:#0068b7; color:white}
#btn{margin-top:10px;}
/*tab*/
#e2 ul{list-style:none; overflow:hidden; height:1%; width:240px}
#e2 li{float:left; cursor:pointer; padding:5px 0; width:78px; border:1px solid #ccc; text-align:center}
#e2 li.current{ font-weight:bold; color:#000;}
#tab_content1 div,#tab_content2 div,#tab_content3 div,#tab_content4 div{ width:228px; height:150px; padding:10px 0 0 10px; border:1px solid #ccc;}
/*scroll*/
.s{ width:150px; height:50px; padding:10px; margin-bottom:10px; border:1px solid #ccc; overflow:hidden}
.s p{padding-bottom:5px;}
.s1{width:600px; height:150px; padding:10px 0; margin:10px 0; border:1px solid #ccc; overflow:hidden}

#wrap{ width:1000em;}
#wrap div{ float:left}
/*grade*/
#e4 div{float:left; height:1%; overflow:hidden;}
#e4 div span{float:left; margin-right:2px; line-height:15px; width:15px; height:15px; background:url(img/pf.gif) no-repeat; text-indent:-9999px; cursor:pointer}
#e4 div span.hover{background-position:left bottom}
#grade_res,#grade_res1{float:left; padding-left:10px; line-height:16px;}
/*tips*/
ol{list-style-position:inside; line-height:1.5; float:left}
.tip{background:#FDFFCE; border:1px solid #FFBA43; color:#666; padding:2px 5px; position:absolute; width:150px; display:none;}
.tip p{color:blue}
</style>
<script type="text/javascript" src="js/min/base-min.js"></script>
<script type="text/javascript" src="js/min/Focus-min.js"></script>
<script type="text/javascript" src="js/Tab.js"></script>
<script type="text/javascript" src="js/Scroll.js"></script>
<script type="text/javascript" src="js/min/Grade-min.js"></script>
<script type="text/javascript" src="js/min/Tips-min.js"></script>
</head>

<body>
<div class="effect clearfix" id="e1">
	<h1>焦点图</h1>
	<div id="focus"><img src="img/focus1.jpg"/><img class="hide" src="img/focus2.jpg"/><img class="hide" src="img/focus3.jpg"/><img class="hide" src="img/focus4.jpg"/></div>
	<div id="ctr"><span class="hover">1</span> <span>2</span> <span>3</span> <span>4</span></div>
	<div id="btn"><button onclick="f1.prev()">PREV</button> <button onclick="f1.next()">NEXT</button></div>
	<br>
	<div id="focus1"><img src="img/focus1.jpg"/><img src="img/focus2.jpg"/><img src="img/focus3.jpg"/><img  src="img/focus4.jpg"/></div>
	<div id="ctr1"><span class="hover">1</span> <span>2</span> <span>3</span> <span>4</span></div>
	<div id="btn"><button onclick="f2.prev()">PREV</button> <button onclick="f2.next()">NEXT</button></div>
</div>
<div class="effect clearfix" id="e2">
	<h1>选项卡</h1>
	<div style="float:left; margin-right:20px;">
		<ul id="tab_test1">
			<li class="current">Tab1</li>
			<li>Tab2</li>
			<li>Tab3</li>
		</ul>
		<div id="tab_content1">
			<div>content1</div>
			<div class="hide">content2</div>
			<div class="hide">content3</div>
		</div>
		<button onclick="t1.prev()">PREV</button><button onclick="t1.next()">NEXT</button>
	</div>
	<div style="float:left">
		<ul id="tab_test2">
			<li class="current">Tab1</li>
			<li>Tab2</li>
			<li>Tab3</li>
		</ul>
		<div id="tab_content2">
			<div>content1</div>
			<div class="hide">content2</div>
			<div class="hide">content3</div>
		</div>
	</div>
</div>
<div class="effect clearfix" id="e3">
	<h1>滚动</h1>
	<div class="s">
		<div id="scroll1">
			<p>111111111&nbsp;&nbsp;111111111
			222222222&nbsp;&nbsp;222222222
			333333333&nbsp;&nbsp;333333333</p>
			<p>444444444&nbsp;&nbsp;444444444
			555555555&nbsp;&nbsp;555555555
			666666666&nbsp;&nbsp;666666666</p>
		</div>
		<div id="scroll2"></div>
	</div>
	<div><button onclick="toUp(s1)">Up</button> <button onclick="toDown(s1)">Down</button></div>

	<div class="s1">
		<div id="wrap">
			<div id="scroll3">
				<img src="img/1.jpg"/><img src="img/2.jpg"/><img src="img/3.jpg"/><img src="img/4.jpg"/><img src="img/1.jpg"/><img src="img/2.jpg"/><img src="img/3.jpg"/><img src="img/4.jpg"/>
			</div>
			<div id="scroll4"></div>
		</div>
	</div>
	<div><button onclick="toLeft(s2)">Left</button> <button onclick="toRight(s2)">Right</button></div>
</div>
<div class="effect clearfix" id="e4">
	<h1>评分</h1>
	<div id="grade"><span>十分差</span><span>比较差</span><span>一般</span><span>比较好</span><span>十分好</span></div>
	<p id="grade_res"></p>
	<br>
	<br>
	<div id="grade1"><span>1分</span><span>2分</span><span>3分</span><span>4分</span><span>5分</span><span>6分</span><span>7分</span><span>8分</span><span>9分</span><span>10分</span></div>
	<p id="grade_res1"></p>
</div>
<div class="effect clearfix" id="e5">
	<h1>提示</h1>
	<ol id="a">
		<li>范玮琪 - 最重要的决定
			<div class="tip">最重要的决定<p>专辑名《最重要的决定》</p></div>	
		</li>
		<li>周杰伦 - 蛇舞
			<div class="tip">蛇舞<p>专辑名《蛇舞》</p></div>	
		</li>
		<li>黄小琥 - 没那么简单
			<div class="tip">没那么简单<p>专辑名《没那么简单》</p></div>	
		</li>
		<li>陈冠希 - solute
			<div class="tip">solute<p>专辑名《solute》</p></div>	
		</li>
		<li>刘璇 - 回见
			<div class="tip">回见<p>专辑名《回见》</p></div>	
		</li>
	<ol>
</div>
</body>
<script>
function toUp(o){
	o.option.dir = "Up";
	o.run();
}

function toDown(o){
	o.option.dir = "Down";
	o.run();
}

function toLeft(o){
	o.option.dir = "Left";
	o.run();
}

function toRight(o){
	o.option.dir = "Right";
	o.run();
}

window.onload = function(){
	f1 = new Focus("focus", "img", "ctr", "span");
	f2 = new Focus("focus1", "img", "ctr1", "span",{event:"scroll", timeout:3000})
	t1 = new Tab("tab_test1", "li", "tab_content1", "div", {event:"mouseover"});
	t2 = new Tab("tab_test2", "li", "tab_content2", "div", {event:"mouseover",autoPlay:true});
	s1 = new Scroll("scroll1", "scroll2");
	s2 = new Scroll("scroll3", "scroll4", {dir:"Right",speed:1,step:3,hand:true,stopSize:150,pause:true});
	new Grade("grade", "grade_res");
	new Grade("grade1", "grade_res1");

	var el = Kg.$A(Kg.$T("li", "e5"));
	new Tips(el);
}
</script>
</html>
